<template>
  <div class="dashboard">
    <!-- 根据用户角色显示不同的仪表盘 -->
    <super-admin-dashboard v-if="isAdmin" />
    <counselor-dashboard v-else-if="isCounselor" />
    <student-dashboard v-else-if="isStudent" />
    <div v-else class="error-tip">
      <el-empty description="未知的用户角色" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import SuperAdminDashboard from './components/SuperAdminDashboard.vue'
import CounselorDashboard from './components/CounselorDashboard.vue'
import StudentDashboard from './components/StudentDashboard.vue'

const store = useStore()

// 获取用户角色
const userRole = computed(() => store.state.user.role)
const userRoles = computed(() => store.state.user.roles || [])

// 判断用户角色
const isAdmin = computed(() => {
  const role = userRole.value?.toLowerCase()
  const roles = userRoles.value.map((role: string) => role.toLowerCase())
  return role === 'admin' || 
         role === 'superadmin' || 
         roles.includes('admin') || 
         roles.includes('superadmin')
})

const isCounselor = computed(() => {
  const role = userRole.value?.toLowerCase()
  const roles = userRoles.value.map((role: string) => role.toLowerCase())
  return role === 'counselor' || roles.includes('counselor')
})

const isStudent = computed(() => {
  const role = userRole.value?.toLowerCase()
  const roles = userRoles.value.map((role: string) => role.toLowerCase())
  return role === 'student' || roles.includes('student')
})
</script>

<style lang="scss" scoped>
.dashboard {
  min-height: 100%;
  background: #f5f7fa;
}
</style> 